格線系統

使用我們強大的行動優先彈性盒狀格線，建立各種形狀和大小的版面，這要歸功於十二欄系統、六個預設的回應層級、Sass 變數和混合，以及數十個預定義的類別。

在此頁面上

範例

Bootstrap 的格線系統使用一系列容器、列和欄位來配置和對齊內容。它是使用彈性盒狀模型建立的，而且完全回應式。以下是範例和深入說明，說明格線系統如何結合在一起。

對彈性盒格式很陌生或不熟悉嗎？ 閱讀這篇 CSS Tricks 彈性盒格式指南，了解背景、術語、指南和程式碼片段。

欄

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

上述範例使用我們預先定義的格線類別，在所有裝置和視窗中建立三個等寬欄。這些欄會使用父層 .container 置中於頁面中。

運作方式

分解說明，以下是格線系統的組成方式

我們的格線支援六個回應式斷點。 斷點基於 min-width 媒體查詢，表示它們會影響該斷點和其上方的所有斷點（例如，.col-sm-4 套用於 sm、md、lg、xl 和 xxl）。這表示您可以藉由每個斷點控制容器和欄的大小和行為。
容器會置中並水平填補您的內容。 使用 .container 取得回應式像素寬度，使用 .container-fluid 取得所有視窗和裝置的 width: 100%，或使用回應式容器（例如，.container-md）取得流動和像素寬度的組合。
列是欄的包裝器。 每一欄都有水平 padding（稱為間距），用於控制欄之間的空間。然後，此 padding 會在列上使用負邊界來抵銷，以確保欄中的內容在視覺上沿左側對齊。列也支援修改器類別，以均勻套用欄大小，以及間距類別來變更內容間距。
欄位有極高的彈性。每列有 12 個範本欄位可用，讓您可以建立各種元素組合，跨越任意數量的欄位。欄位類別會指出要跨越的範本欄位數（例如，col-4 跨越四個）。width 以百分比設定，因此您始終具有相同的相對大小。
間距也會回應式且可自訂。 間距類別在所有中斷點都可用，大小與我們的邊界和內距間距相同。使用 .gx-* 類別變更水平間距，使用 .gy-* 變更垂直間距，或使用 .g-* 類別變更所有間距。.g-0 也可用於移除間距。
Sass 變數、對應和混合控制網格。如果您不想在 Bootstrap 中使用預先定義的網格類別，可以使用我們的網格來源 Sass 建立自己的語意標記。我們也包含一些 CSS 自訂屬性來使用這些 Sass 變數，讓您有更大的彈性。

請注意彈性盒的限制和錯誤，例如無法將某些 HTML 元素用作彈性容器。

網格選項

Bootstrap 的網格系統可以在所有六個預設中斷點，以及您自訂的任何中斷點中調整。六個預設網格層級如下

特小 (xs)
小 (sm)
中 (md)
大 (lg)
特大 (xl)
特特大 (xxl)

如上所述，這些中斷點各自有自己的容器、獨特的類別前綴和修改器。以下是網格在這些中斷點中的變更方式

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
容器 `max-width`	無 (自動)	540px	720px	960px	1140px	1320px
類別前綴	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
欄位數	12
間距寬度	1.5rem（左右各 0.75rem）
自訂間距	是
可巢狀	是
欄位排序	是

自動配置欄位

使用特定於中斷點的欄位類別，即可輕鬆調整欄位大小，而無需明確的編號類別，例如 .col-sm-6。

等寬

例如，以下是兩個網格配置，適用於從 xs 到 xxl 的所有裝置和視窗。針對每個所需的斷點新增任意數量的無單位類別，每個欄位都會是相同寬度。

1/2

2/2

1/3

2/3

3/3

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

設定一個欄位寬度

彈性盒狀格線欄位的自動配置也表示你可以設定一個欄位的寬度，讓兄弟欄位自動調整大小。你可以使用預先定義的格線類別（如下所示）、格線混合或內嵌寬度。請注意，不論中央欄位的寬度為何，其他欄位都會調整大小。

1/3

2 of 3（較寬）

3/3

1/3

2 of 3（較寬）

3/3

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

變動寬度內容

使用 col-{斷點}-auto 類別根據內容的自然寬度調整欄位大小。

1/3

可變寬度內容

3/3

1/3

可變寬度內容

3/3

html

<div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

回應式類別

Bootstrap 的格線包含六層預先定義的類別，用於建構複雜的回應式配置。你可以自訂在極小、小、中、大或極大裝置上的欄位大小。

所有斷點

對於從最小裝置到最大裝置都相同的格線，請使用 .col 和 .col-* 類別。當你需要特定大小的欄位時，請指定一個編號類別；否則，請隨時使用 .col。

col

col-8

col-4

html

<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

堆疊成水平

使用一組 .col-sm-* 類別，你可以建立一個基本的格線系統，從堆疊開始，然後在小斷點（sm）處變為水平。

col-sm-8

col-sm-4

col-sm

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

混合搭配

不希望你的欄位在某些格線層中堆疊嗎？請根據需要為每個層使用不同類別的組合。請參閱以下範例，以更深入了解其運作方式。

.col-md-8

.col-6 .col-md-4

.col-6

html

<div class="container text-center">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

列欄

使用回應式 .row-cols-* 類別，快速設定最適合呈現內容和版面的欄位數目。一般 .col-* 類別套用於個別欄位（例如 .col-md-4），而列欄類別則設定於父層 .row 作為捷徑。使用 .row-cols-auto 可以讓欄位擁有自然寬度。

使用這些列欄類別，快速建立基本格線版面或控制卡片版面。

欄

html

<div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

欄

html

<div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

欄

html

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

欄

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

欄

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

欄

html

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

您也可以使用隨附的 Sass 混入 row-cols()

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

巢狀

若要使用預設格線巢狀呈現內容，請在現有的 .col-sm-* 欄位中，新增 .row 和一組 .col-sm-* 欄位。巢狀列應包含一組欄位，其總和為 12 或更少（不一定要使用所有 12 個欄位）。

層級 1：.col-sm-3

層級 2：.col-8 .col-sm-6

層級 2：.col-4 .col-sm-6

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

CSS

使用 Bootstrap 的 Sass 原始檔時，您可以使用 Sass 變數和混入，建立自訂、語意化且回應式的網頁版面。我們的預先定義格線類別使用相同的變數和混入，提供一整套即用型類別，快速建立回應式版面。

Sass 變數

變數和映射決定欄位數目、間隙寬度和開始浮動欄位的媒體查詢點。我們使用這些來產生上面記載的預定義格線類別，以及下面列出的自訂混合。

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

scss/_variables.scss

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

scss/_variables.scss

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Sass 混合

混合與格線變數結合使用，為個別格線欄位產生語意化 CSS。

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

範例用法

您可以修改變數為您自己的自訂值，或僅使用混合及其預設值。以下是使用預設設定建立兩個欄位配置，並在中間留有間隙的範例。

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

主要內容

次要內容

html

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

自訂格線

使用我們內建的格線 Sass 變數和映射，可以完全自訂預定義的格線類別。變更層數、媒體查詢尺寸和容器寬度，然後重新編譯。

欄位和間隙

格線欄位數目可透過 Sass 變數修改。$grid-columns 用於產生每個個別欄位的寬度（以百分比表示），而 $grid-gutter-width 則設定欄位間隙的寬度。$grid-row-columns 用於設定 .row-cols-* 的最大欄位數目，超過此限制的任何數目都會被忽略。

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

格線層級

除了欄位本身之外，您也可以自訂格線層級數目。如果您只想要四個格線層級，您會將 $grid-breakpoints 和 $container-max-widths 更新為類似以下內容

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

在對 Sass 變數或對應進行任何變更時，您需要儲存變更並重新編譯。這樣會為欄寬、偏移和排序輸出全新的一組預定義格線類別。回應式可見性工具程式也會更新為使用自訂斷點。請務必以 px 設定格線值（而非 rem、em 或 %）。